<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./reset.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <style>
    .box {
      width: 260px;
      margin-top: 100px;
      margin-left: auto;
      margin-right: auto;
    }
    .box > ul {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="box">
    <input id="id-input-text" type="text">
    <button type="button" id="id-btn-add" class="btn btn-info">add</button>

    <ul id="id-ul-list">
      <li>task 1</li>
      <li>taks 2</li>
      <li>task 3</li>
    </ul>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <script type="text/javascript">
    // 1. 先拿到 button
    const $button = $('#id-btn-add')
    
    $button.click(function() {
      // 1. 得到 input text 的值
      const $input = $('#id-input-text')
      const val = $input.val()
      // 2. 生成 li
      const liNode = document.createElement('li')
      liNode.innerText = val
      // 3. ul 里面添加一个 li
      const $ul = $('#id-ul-list')
      $ul.append(liNode)
    })
  </script>

</body>
</html>
